<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery.min.js"></script>
    <style>
        .foodsList {
            margin-top: 10px;
            height: 750px;
            overflow-y: scroll;
        }
        .food {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 10px;
            width: 90%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 15px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="iphone-top">
        <span class="camera"></span>
        <span class="sensor"></span>
        <span class="speaker"></span>
    </div>
    <div class="top-bar"></div>
    <div class="foodsList">
        <div th:each="food : ${foods}" class="food">
            <div>
                <p>名称：<span th:text="${food.name}"></span></p>
                <p>品牌：<span th:text="${food.brand}"></span></p>
                <p>类型：<span th:text="${food.type}"></span></p>
                <p>价格：<span th:text="${food.price}"></span></p>
                <p>库存：<span th:text="${food.nums}"></span></p>
                <p>有效期至：<span th:text="${food.expiryDate}"></span></p>
            </div>
            <div>
                <input id="numsInput" type="number" min="1" th:max="${food.nums}" value="1" size="large">
                <button th:data-id="${food.id}" th:data-price="${food.price}" onclick="buyFood(this.getAttribute('data-id'), this.getAttribute('data-price'))">购买</button>
            </div>

        </div>
    </div>
    <div class="footer-nav">
        <a href="/user/pet" th:classappend="${currentPage == 'pet' ? 'active' : ''}">
        <span>
            <svg t="1723527876093" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4542" width="200" height="200"><path d="M901.76 427.626667l26.56 203.306666c16.789333 128.490667-73.770667 246.293333-202.261333 263.082667a234.666667 234.666667 0 0 1-30.421334 1.984H328.362667c-129.6 0-234.666667-105.066667-234.666667-234.666667a234.666667 234.666667 0 0 1 1.984-30.421333l26.581333-203.306667a400.917333 400.917333 0 0 1-61.44-70.848C27.733333 308.544 15.061333 262.378667 24.234667 218.88c2.197333-10.389333 6.890667-20.053333 13.653333-28.117333 30.037333-35.818667 80.426667-60.608 150.741333-75.456 48.64-10.282667 96.426667-11.413333 143.317334-3.370667a61.824 61.824 0 0 1 35.456 19.626667V128h292.693333a61.802667 61.802667 0 0 1 31.957333-16.042667c46.869333-8.042667 94.698667-6.912 143.317334 3.370667 70.336 14.848 120.704 39.637333 150.741333 75.456 6.762667 8.064 11.456 17.706667 13.653333 28.117333 9.173333 43.477333-3.52 89.642667-36.586666 137.856a400.917333 400.917333 0 0 1-61.44 70.869334z m-40.426667 20.096a61.568 61.568 0 0 1-53.44-22.336 64.192 64.192 0 0 1-10.282666-17.536c-10.666667-27.306667-30.634667-59.157333-59.989334-95.296a1959.786667 1959.786667 0 0 0-80.533333-93.696A64.618667 64.618667 0 0 1 640.149333 170.666667H383.850667a64.618667 64.618667 0 0 1-16.938667 48.213333 1959.786667 1959.786667 0 0 0-80.533333 93.674667c-29.354667 36.138667-49.322667 67.989333-59.989334 95.296-2.496 6.378667-5.973333 12.288-10.282666 17.536a61.568 61.568 0 0 1-53.44 22.336l-24.682667 188.714666A192 192 0 0 0 328.362667 853.333333h367.274666a192 192 0 0 0 190.378667-216.896l-24.682667-188.714666zM512 674.282667A149.248 149.248 0 0 1 384 746.666667a21.333333 21.333333 0 0 1 0-42.666667 106.666667 106.666667 0 0 0 106.666667-106.666667c0-1.834667 0.213333-3.626667 0.661333-5.333333a42.666667 42.666667 0 1 1 41.344 0c0.426667 1.706667 0.661333 3.498667 0.661333 5.333333a106.666667 106.666667 0 0 0 106.666667 106.666667 21.333333 21.333333 0 0 1 0 42.666667 149.248 149.248 0 0 1-128-72.362667zM682.666667 533.333333a42.666667 42.666667 0 1 1 0-85.333333 42.666667 42.666667 0 0 1 0 85.333333zM184.490667 397.802667c1.429333-1.749333 2.56-3.712 3.413333-5.845334 12.373333-31.936 34.432-67.392 66.112-106.624a1995.669333 1995.669333 0 0 1 81.664-95.68 21.76 21.76 0 0 0-0.789333-30.08 20.394667 20.394667 0 0 0-10.773334-5.546666c-41.429333-7.146667-83.733333-6.144-127.061333 3.072-61.653333 13.12-103.722667 33.962667-126.613333 61.44a21.546667 21.546667 0 0 0-4.522667 9.386666c-6.4 30.549333 3.029333 65.109333 29.738667 104.32a354.432 354.432 0 0 0 59.754666 68.053334 20.202667 20.202667 0 0 0 29.077334-2.496z m655.04 0a20.202667 20.202667 0 0 0 29.077333 2.496c21.973333-19.2 41.898667-41.856 59.733333-68.053334 26.730667-39.210667 36.138667-73.770667 29.738667-104.32a21.546667 21.546667 0 0 0-4.501333-9.386666c-22.890667-27.477333-64.981333-48.32-126.613334-61.44-43.328-9.216-85.632-10.24-127.061333-3.072a20.394667 20.394667 0 0 0-10.773333 5.546666 21.76 21.76 0 0 0-0.789334 30.08 1995.669333 1995.669333 0 0 1 81.664 95.68c31.68 39.253333 53.738667 74.666667 66.133334 106.624 0.810667 2.133333 1.962667 4.096 3.413333 5.845334zM341.333333 533.333333a42.666667 42.666667 0 1 1 0-85.333333 42.666667 42.666667 0 0 1 0 85.333333z" fill="#3D3D3D" p-id="4543"></path></svg>
        </span>
            <span>宠物购买</span>
        </a>
        <a href="/user/appointment" th:classappend="${currentPage == 'appointment' ? 'active' : ''}">
        <span>
            <svg t="1723528056258" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5626" width="200" height="200"><path d="M883.456 426.02496V244.15744c0-85.29408-69.12512-154.42432-154.42432-154.42432h-16.67072v-36.93568c0-21.28896-17.26464-38.5536-38.62016-38.5536a38.5536 38.5536 0 0 0-38.5536 38.5536v36.93568H274.88768v-36.93568c0-21.28896-17.3312-38.5536-38.62016-38.5536-21.36064 0-38.62016 17.26464-38.62016 38.5536v36.93568H162.8672c-85.2992 0-154.42432 69.13024-154.42432 154.42432v591.89248c0 85.29408 69.12512 154.4192 154.42432 154.4192h293.72928a38.58432 38.58432 0 0 0 49.8944-36.93568c0-19.05152-13.83424-34.8928-32.04608-38.02112a9.10336 9.10336 0 0 0-1.35168-0.59904c-11.72992-3.81952-310.2208-1.68448-310.2208-1.68448-42.57792 0-77.17376-34.60096-77.17376-77.17888v-410.0608h768.19968M162.8672 166.90688h34.78016v66.03264a38.58432 38.58432 0 0 0 38.62016 38.62016 38.6304 38.6304 0 0 0 38.62016-38.62016V166.90688h360.29952v66.03264c0 21.36064 17.26464 38.62016 38.5536 38.62016a38.58432 38.58432 0 0 0 38.62016-38.62016V166.90688h16.67072c42.57792 0 77.24544 34.66752 77.24544 77.24544v104.58624H85.68832V244.15744c0-42.57792 34.60096-77.25056 77.17888-77.25056z" p-id="5627"></path><path d="M763.81184 477.44c-142.13632 0-257.32608 115.2512-257.32608 257.32608 0 142.13632 115.18464 257.39264 257.32608 257.39264 142.13632 0 257.39264-115.2512 257.39264-257.39264 0-142.07488-115.2512-257.32608-257.39264-257.32608z m0 437.46816c-99.28192 0-180.1472-80.7936-180.1472-180.1472 0-99.29216 80.86016-180.08064 180.1472-180.08064 99.3536 0 180.1472 80.78848 180.1472 180.08064 0 99.3536-80.78848 180.1472-180.1472 180.1472z" p-id="5628"></path><path d="M841.05728 760.55552h-77.24544V683.3152a25.74848 25.74848 0 0 0-25.72288-25.73312 25.7536 25.7536 0 0 0-25.728 25.73312v102.96832a25.74336 25.74336 0 0 0 25.728 25.728h102.96832a25.74848 25.74848 0 0 0 25.728-25.728 25.74848 25.74848 0 0 0-25.728-25.728zM352.06656 528.89088h-154.4192a25.75872 25.75872 0 0 0 0 51.51744h154.42432a25.74336 25.74336 0 0 0 25.72288-25.728 25.75872 25.75872 0 0 0-25.728-25.78944zM352.06656 709.03296h-154.4192a25.76384 25.76384 0 0 0-25.728 25.79968 25.74336 25.74336 0 0 0 25.728 25.72288h154.42432a25.73824 25.73824 0 0 0 25.72288-25.72288 25.76384 25.76384 0 0 0-25.728-25.79968z" p-id="5629"></path></svg>
        </span>
            <span>预约</span>
        </a>
        <a href="/user/food" th:classappend="${currentPage == 'food' ? 'active' : ''}">
        <span>
            <svg t="1723528149518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6929" width="200" height="200"><path d="M951.599 521.023c36.068 40.163 49.59 98.315 30.253 152.786-19.335 54.467-66.497 91.032-119.787 99.37 5.828 53.706-17.165 108.816-64.649 141.681-47.481 32.865-107.091 34.928-155.189 10.488-26.626 46.979-77.453 78.236-135.167 77.11-57.723-1.142-107.276-34.371-132.045-82.347-49.026 22.526-108.497 18.137-154.663-16.585-46.167-34.694-66.98-90.668-59.053-144.097-52.939-10.414-98.631-48.792-115.816-103.99-17.186-55.184-1.396-112.783 36.214-151.483-36.858-39.448-51.514-97.324-33.239-152.172 18.261-54.834 64.692-92.305 117.813-101.711-6.882-53.56 15.029-109.095 61.869-142.897 46.826-33.801 106.391-37.034 154.956-13.559 25.705-47.476 75.895-79.727 133.639-79.727 62.022 0 115.311 37.238 138.904 90.579 51.411-27.468 116.285-23.928 165.15 14.334 45.478 35.6 65.194 91.969 56.229 145.223 52.706 11.451 97.63 50.738 113.741 106.259 16.118 55.49-0.804 112.767-39.161 150.736M961.318 378.726c-15.103-52.143-57.249-89.030-106.663-99.793 8.403-50.022-10.083-102.983-52.748-136.432-45.831-35.908-106.668-39.257-154.883-13.442-22.129-50.108-72.107-85.079-130.268-85.079-54.146 0-101.228 30.276-125.331 74.885-45.539-22.056-101.41-19.028-145.325 12.725-43.937 31.739-64.478 83.91-58.029 134.239-49.823 8.833-93.351 44.009-110.493 95.538-17.135 51.513-3.386 105.892 31.175 142.926-35.271 36.36-50.086 90.462-33.955 142.284 16.111 51.849 58.965 87.901 108.614 97.701-7.437 50.181 12.081 102.732 55.382 135.349 43.293 32.601 99.063 36.74 145.061 15.564 23.227 45.076 69.686 76.29 123.825 77.341 54.124 1.068 101.79-28.287 126.771-72.412 45.107 22.947 101 21.016 145.537-9.859 44.546-30.861 66.096-82.637 60.633-133.082 49.984-7.841 94.199-42.169 112.341-93.33 18.129-51.161 5.457-105.804-28.38-143.526 35.988-35.658 51.849-89.453 36.735-141.595z" fill="#272536" p-id="6930"></path><path d="M681.367 742.928c-7.395 0-14.349-2.88-19.584-8.114l-201.523-201.516-31.582 20.872-116.265-116.27c-50.533-50.539-63.164-117.098-28.738-151.523l4.006-4.006 413.27 413.272c5.233 5.233 8.109 12.19 8.109 19.585 0 7.401-2.878 14.356-8.109 19.586-5.234 5.234-12.183 8.114-19.583 8.114v0zM461.732 518.741l208.062 208.065c6.184 6.186 16.96 6.18 23.146 0 3.090-3.093 4.792-7.204 4.792-11.577 0-4.369-1.7-8.48-4.792-11.572l-405.044-405.047c-24.939 31.048-11.446 87.306 32.528 131.28l109.726 109.726 31.582-20.875z" fill="#272536" p-id="6931"></path><path d="M311.877 749.608c-7.164 0-13.896-2.789-18.963-7.855-10.456-10.459-10.456-27.473 0-37.932l133.121-133.126 8.010 8.011-133.121 133.123c-6.041 6.041-6.041 15.873 0 21.913 5.852 5.852 16.054 5.852 21.907 0l145.225-145.226 8.010 8.013-145.226 145.224c-5.067 5.065-11.794 7.855-18.963 7.855v0z" fill="#272536" p-id="6932"></path><path d="M550.503 522.089l-8.010-8.011 57.631-57.635 31.743 31.735 125.613-125.617c2.098-2.103 2.098-5.519 0-7.621-2.096-2.102-5.516-2.102-7.616 0l-75.423 75.42-31.267-31.261 75.423-75.421c2.103-2.102 2.103-5.521 0-7.62-2.092-2.096-5.51-2.098-7.611 0.003l-75.423 75.423-31.266-31.264 75.423-75.42c2.102-2.102 2.102-5.519 0-7.62-2.102-2.102-5.52-2.099-7.623 0.003l-125.61 125.614 31.733 31.734-55.093 55.092-8.011-8.011 47.083-47.083-31.731-31.734 133.618-133.626c6.528-6.517 17.126-6.517 23.643 0 6.523 6.517 6.523 17.124 0 23.64l-67.412 67.409 15.246 15.243 67.412-67.412c3.153-3.156 7.347-4.895 11.815-4.895v0c4.471 0 8.664 1.737 11.817 4.893 6.516 6.516 6.516 17.122 0.006 23.64l-67.418 67.411 15.246 15.24 67.411-67.41c6.312-6.315 17.327-6.308 23.638 0 3.159 3.157 4.896 7.355 4.896 11.82 0 4.466-1.737 8.666-4.896 11.822l-133.623 133.626-31.742-31.734-49.623 49.626z" fill="#272536" p-id="6933"></path></svg>
        </span>
            <span>食品购买</span>
        </a>
        <a href="/user/me" th:classappend="${currentPage == 'me' ? 'active' : ''}">
        <span>
            <svg t="1723528209088" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7950" width="200" height="200"><path d="M508.8 141.21c119.85 0 217.36 97.51 217.36 217.36S628.65 575.93 508.8 575.93s-217.36-97.51-217.36-217.36 97.51-217.36 217.36-217.36m0-76.71c-162.41 0-294.07 131.66-294.07 294.07S346.39 652.64 508.8 652.64s294.07-131.66 294.07-294.07S671.21 64.5 508.8 64.5z" p-id="7951"></path><path d="M106.1 959.5c-2.21 0-4.46-0.19-6.71-0.59-20.86-3.68-34.79-23.58-31.11-44.44 38.81-219.89 255.93-338.54 440.52-338.54 21.18 0 38.36 17.17 38.36 38.36s-17.17 38.36-38.36 38.36c-122.34 0-329.6 74.7-364.97 275.17-3.28 18.59-19.47 31.68-37.73 31.68z" p-id="7952"></path><path d="M917.9 959.5c-18.27 0-34.45-13.09-37.73-31.7-35.38-200.46-242.64-275.16-364.97-275.16-21.18 0-38.36-17.17-38.36-38.36s17.17-38.36 38.36-38.36c184.59 0 401.72 118.65 440.52 338.54 3.68 20.86-10.25 40.76-31.11 44.44-2.25 0.41-4.5 0.6-6.71 0.6z" p-id="7953"></path></svg>
        </span>
            <span>我</span>
        </a>
    </div>
    <div class="buttons">
        <span class="on-off"></span>
        <span class="sleep"></span>
        <span class="up"></span>
        <span class="down"></span>
    </div>
    <div class="bottom-bar"></div>
</div>

</body>
<script src="/js/food.js"></script>
</html>
